<template>
<div class="bg">
  <div id="b">
  <el-container>
    <el-aside width="50px">
      <div style="height: 800px;">
        <el-steps direction="vertical" >
          <el-step title="后端攻城狮"></el-step>
          <el-step title="前端攻城狮"></el-step>
          <el-step title="全栈工程师" ></el-step>
        </el-steps>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="pindex" style="color:darkorange"><strong>公司主页</strong></el-menu-item>
          <el-menu-item index="personnels" style="color: darkmagenta"><strong>员工管理</strong></el-menu-item>
          <el-menu-item index="class" style="color: darkgreen" disabled><strong>部门管理</strong></el-menu-item>
          <el-menu-item index="users" style="color: darkcyan"><strong>hr管理</strong></el-menu-item>
          <el-menu-item index="/" style="color: red" @click="logout">退出</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
  </div>
</div>
</template>

<script>
export default {
  name: "personnel",
  data() {
    return {
      activeIndex: 'pindex'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    logout(){
      this.$http.get('http://localhost:8989/logout');
      this.$router.push("/");
    }
  },
  created() {
    this.$router.push("pindex");
  }
}

</script>

<style scoped>
.bg{
  background-image:url(../assets/image/1.jpg);
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-attachment: local;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  -o-background-size: cover;
  background-position: center;
}
#b{ background:#000;
  color: #00ff22;
  filter:alpha(Opacity=60);
  -moz-opacity:0.8;opacity: 0.8
}


</style>